/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Rules necessary for styling Material Design-inspired help boxes.
 */

/**
 * Styles shared by both below and right help boxes.
 */

/* Main help box wrapper element, used by both below and right help boxes */
.HelpBox {
	position: absolute;

	/* formerly on helpBoxBounds */
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 0 19px 75px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22); /* based on <Dialog>, updated spread to 75px (from 60px) to provide shadow for triangles */
	z-index: 2000; /* to cover the nav AppBar if required */
}

.helpBelow {
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + 17px); /* 16.2px triangle diagonal */
}

.helpAbove {
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 17px); /* 16.2px triangle diagonal */
}

.helpRight {
	left: calc(100% + 35px); /* 24px + 11px triangle */
	top: 50%;
	transform: translateY(-50%);
}

/* HelpBox triangle - shared styles */
.HelpBox:before {
	background-color: #ffffff;
	content: '';
	display: block;
	height: 23px;
	position: absolute;
	width: 23px;
	z-index: 2;
}

/* HelpBox text container */
.helpBoxContent {
	padding: 12px 24px;
}

/* HelpBox text */
.helpBoxContent p {
	margin: 0;
	padding: 8px 0 8px 0;
}

.helpBoxContent p:first-child {
	padding-top: 0;
}

/* Button container */
.buttonContainer {
	display: flex;
	justify-content: flex-end;
	padding: 8px;
}

/**
 * Help box right
 */

/* HelpBox triangle right */
.helpRight:before {
	left: -11.5px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/**
 * Help box below
 */

/* HelpBox triangle below */
.helpBelow:before {
	left: 50%;
	top: -11.5px;
	transform: translateX(-50%) rotate(-45deg);
}

.helpAbove:before {
	left: 50%;
	bottom: -11.5px;
	transform: translateX(-50%) rotate(-45deg);
}
